import React, { Component } from 'react'
import PropTypes from 'prop-types'
import {nanoid} from 'nanoid'
import './index.css'

// 使用nanoid生成id    在此nanoid 和uuid都是自动生成id的组件库  安装方法 yarn add nanoid   或npm i nanoid
console.log(nanoid());

export default class Header extends Component {

    // 对接收的Props进行：类型、必要性的限制
    static propTypes = {
        addTodo:PropTypes.func.isRequired
    }

    // 键盘事件的回调
    handleKeyUp = (event) =>{
        // 结构赋值获取keyCode,target
        const {keyCode,target} = event
        // 判断是否是回车按键
        if(keyCode !== 13) return;
            if(target.value.trim() ===''){
                alert('输入不能为空');
                return;
            }
        // 准备一个todo对象
        const todoObj = {id:nanoid(),name:target.value,done:false}
        // 将todoObj传给App
        this.props.addTodo(todoObj)
        target.value = ''
    }

    render() {
        return (
               <div className="todo-header">
                  <input onKeyUp={this.handleKeyUp} type="text" placeholder="请输入你的任务名称，按回车键确认"/>
                </div> 
        )
    }
}
  